<template>
	<view class="window"> 
		<!-- 导航栏 -->
		<navigationBar :backStatus="false"></navigationBar>

		<view class="title"></view>

		<!-- 头部 -->
		<view class="header_box radius_box">
			<view class="header_top">
				<view class="smile_icon">
					<image class="icon" src="../../static/components/smile.svg" mode="widthFix" />
				</view>
				<view class="header_content">
                    <template v-if="isWeekend">
                        <view class="time_label" v-if="surplusTime">
                            周末了，好好<text class="time important_text">休息</text>~
                        </view>
                        <view class="time_label" v-else>
                            <text class="important_text">下班 ！！！</text>
                        </view>
                    </template>
                    <template v-else>
                        <view class="time_label" v-if="surplusTime">
                            距离
                            <text class="important_text">下班！</text>
                            还有<text class="time">{{ surplusTime }}</text>
                        </view>
                        <view class="time_label" v-else>
                            <text class="important_text">下班 ！！！</text>
                        </view>
                    </template>

					<picker mode="time" :value="endTime" start="05:00" end="23:00" @change="bindTimeChange">
						<view class="edit_icon">
							设置时间
							<image class="icon" src="../../static/edit_icon.svg" mode="widthFix" />
							<view>({{ endTime }})</view>
						</view>
					</picker>
				</view>
			</view>

			<view class="progress_bar_box">
				<view class="progress_bar" :style="{ width: progressWidth }"></view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="content_box">
			<view class="class_hour_box">
				<commonTitle commonTitle="课时设置" :moreTitle="false"></commonTitle>
				<!--  @click="popupStatus('classHour_popup', true)" -->
				<view class="classHour_content radius_box">
					<view class="classHour_item" v-for="(item, index) in classTimeList" :key="item.timeId">
						<view class="label">No.{{ index + 1 }}</view>

						<!-- 编辑 -->
						<view class="show_box" v-show="isEditClassTimeIndex != index">
							<view class="time_label">{{ item.beginTime }} - {{ item.endTime }}</view>
							<view class="edit_icon" @click="changeEditState(item, index, true)">
								<image class="icon" src="../../static/settingPage/edit_icon.svg" mode="widthFix" />
							</view>
						</view>

						<view class="edit_input" v-show="isEditClassTimeIndex == index">
							<view class="time_label">
								<input class="start_input" maxlength="7" v-model="item.beginTime" />
								-
								<input class="end_input" maxlength="7" v-model="item.endTime" />
							</view>
							<view class="edit_icon" @click="changeEditState(item, index, false)">
								<image class="icon" src="../../static/settingPage/cancel.svg" mode="widthFix" />
							</view>
							<view class="edit_icon" @click="changeListCont(item, index)">
								<image class="icon" src="../../static/settingPage/confirm.svg" mode="widthFix" />
							</view>
						</view>
					</view>
				</view>
				<view class="classHour_btn_box">
					<view class="delete_btn btn_box" @click="handleClassList('delete')">
						<image class="icon" src="../../static/settingPage/delete.png" mode="widthFix" />
					</view>
					<view class="add_btn btn_box" @click="handleClassList('add')">
						<image class="icon" src="../../static/settingPage/add.png" mode="widthFix" />
					</view>
				</view>
			</view>

			<!-- 课程表内容 -->
			<view class="curriculum_box">
				<commonTitle commonTitle="课表设置" :moreTitle="false"></commonTitle>
				<!--  @click="popupStatus('classHour_popup', true)" -->
				<view class="curriculum_content">
					<view class="week_box">
						<view class="week_title" :class="{ active_week: chooseWeek === index }" @click="chooseWeek = index" v-for="(weekItem, index) in classTableData" :key="weekItem.week">星期{{ weekItem.week }}</view>
					</view>
					<view class="curriculum_table">
						<view
							class="curriculum_table_item"
							v-for="(classItem, index) in classTableData[chooseWeek].data"
							:key="classItem.timeId + index"
							@click="
								chooseClassIndex = index
								popupStatus('curriculum_popup', true)
							"
						>
							<view class="label">第{{ index + 1 }}节</view>
							<view class="select_class">
								<view class="text_box" v-if="showClassroom(classItem.classroom)" :style="{ backgroundColor: showClassroom(classItem.classroom).bgColor }">{{ showClassroom(classItem.classroom).name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 班级部分内容 -->
			<view class="classroom_box">
				<commonTitle commonTitle="班级设置" :moreTitle="false"></commonTitle>
				<view class="classroom_content">
					<view class="classroom_item" v-for="(item,index) in privateClassroomList" :key="item.classroomId" @click="">
						<view class="color_box" @click="selectColor(item)">
							<view class="color" :style="{ backgroundColor: item.bgColor }">{{ item.bgColor }}</view>
						</view>
                        
                        <!-- 编辑 -->
						<view class="label flex-cen-cen">
                            <input class="name_input" maxlength="7" v-model="item.name" v-show="isEditClassroomIndex == index"/>
                            <text v-show="isEditClassroomIndex != index">{{ item.name }}</text>
                        </view>

                        <view class="edit_box" 
                            @click="changeClassroomEditState(item, index, true)" 
                            v-show="isEditClassroomIndex != index">
                            <image class="icon" src="../../static/settingPage/edit_icon.svg" mode="widthFix" />
                        </view>
                        
                        <!-- x √ -->
                        <view class="edit_box" v-show="isEditClassroomIndex == index" @click="changeClassroomEditState(item, index, false)">
                            <image class="icon" src="../../static/settingPage/cancel.svg" mode="widthFix" />
                        </view>
                        <view class="edit_box" v-show="isEditClassroomIndex == index" @click="changeClassroomListCont(item, index)">
                            <image class="icon" src="../../static/settingPage/confirm.svg" mode="widthFix" />
                        </view>
					</view>
				</view>

                <!-- 加减按钮 -->
				<view class="classHour_btn_box">
					<view class="delete_btn btn_box" @click="handleClassRoomList('delete')">
						<image class="icon" src="../../static/settingPage/delete.png" mode="widthFix" />
					</view>
					<view class="add_btn btn_box" @click="handleClassRoomList('add')">
						<image class="icon" src="../../static/settingPage/add.png" mode="widthFix" />
					</view>
				</view>
			</view>
		</view>

        <view class="loading_box" v-show="!showBottomContent" @click="addClickNum">
            <animationCom/>
        </view>
		<!-- 页面底部图片 -->
		<view class="icon_box" v-show="showBottomContent">
            <view class="top_text">
                <p>下班后，记得好好休息，放松一下，放松一下</p>
                <p>工作只是生活中的一部分哦~</p>
                <p>我们是来体验和享受生活的</p>
                <p>要做的就是尝试，收获和感受</p>
                <!--<p>经历有趣的事情，遇见难忘的瞬间</p>-->
                <p>生命本就没有意义</p>
                <p>我们的体验就是最大的意义 😊</p>
                <p class="end_text">美好可能不会如期而至，但它从未缺席哦~</p>
            </view>
			<image class="flower" src="../../static/flower.svg" mode="widthFix" />

			<view class="smile_box">
				<view class="text_box">
					<image class="adorn_box" src="../../static/settingPage/adorn.svg" mode="widthFix" />
					<image class="text_icon" src="../../static/settingPage/hopeYouWell.png" mode="widthFix" />
				</view>

				<view class="happy_box">
					<image class="adorn_box adorn_box1" src="../../static/settingPage/adorn1.svg" mode="widthFix" />
					<image class="icon" src="../../static/components/smile_end.svg" mode="widthFix" />
					<view class="text_happy">
						<text class="red">H</text>
						<text class="blue">a</text>
						<text class="green">p</text>
						<text class="purple">p</text>
						<text class="yellow">y</text>
					</view>
					<image class="adorn_box adorn_box2" src="../../static/settingPage/adorn2.svg" mode="widthFix" />
				</view>
			</view>

            <view class="bottom_text">
                <p>愿你成为自己的太阳，无需借助谁的光</p>
            </view>
		</view>

        <view class="bottom_box"  :style="{ height: tabBarHeight + 'px'}" ></view>

		<!-- 设置弹窗 -->
		<uni-popup ref="end_time_popup" type="bottom" :safe-area="false">
			<view class="popup_box">
				<view class="popup_title">设置 END 时间</view>
			</view>
		</uni-popup>

		<!-- 设置弹窗 -->
		<uni-popup ref="curriculum_popup" type="bottom" :safe-area="false">
			<view class="popup_box curriculum_popupBox">
				<view class="popup_title">选择班级</view>
				<view class="classroom_cont">
                    <view class="classroom_item course_cont">
                        <view class="left_box">科目(备注)：</view>
                        <input class="title_input" maxlength="6" v-model="getClassroomData.title" />
                        <view class="right_btn" @click="updateClassContent(getClassroomData)">确认</view>
                    </view>
					<view class="classroom_item" @click="selectClassroom({})">
                        <view class="color_box">
                            <view class="color" :style="{ backgroundColor: '#ffffff' }">#CLEAR</view>
                        </view>
						<view class="label label_null">置空</view>
					</view>
					<view class="classroom_item" v-for="item in privateClassroomList" :key="item.classroomId" @click="selectClassroom(item)">
						<view class="color_box">
							<view class="color" :style="{ backgroundColor: item.bgColor }">{{ item.bgColor }}</view>
						</view>
						<view class="label" :style="{ color: getClassroomData.classroom == item.classroomId ? '#70c000' : '' }">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</uni-popup>

        <!-- 颜色弹窗 -->
        <uv-pick-color 
            ref="pickerColor" 
            confirmColor="#70c000"
            :color="nowColor" 
            @confirm="confirmColor"
        ></uv-pick-color>
	</view>
</template>

<script>
import navigationBar from "../../components/navigationBar/navigationBar.vue"
import commonTitle from "../../components/commonTitle/commonTitle.vue"
import animationCom from '../../components/animationCom/animationCom.vue';

import { timeList, classroomList, tableData } from "../../public/classInfo"

export default {
	components: { navigationBar, commonTitle, animationCom },
	props: {},
	data() {
		return {
            tabBarHeight: this.$bus.tabBarHeight,
			endTime: "16:30",
			surplusTime: "",
            isWeekend: false, // 是否周末
			progressWidth: "0%",
            clickNum: 0, // 点击次数
            showBottomContent: false, // 显示底部图片内容


			classTimeList: [], // 课时列表
			temporaryClassTimeList: [], // 临时存储的课时列表，用于编辑状态下的数据保存
            isEditClassTimeIndex: null, // 编辑的课时索引


			classTableData: [], // 课表内容
			chooseWeek: 0, // 选择的星期
			chooseClassIndex: null, // 选择的课时索引


			privateClassroomList: classroomList, // 班级列表
            isEditClassroomIndex: null, // 编辑的班级索引
            temporaryClassroomList: [], // 临时存储的班级列表，用于编辑状态下的数据保存
            changeColorRoomId: null, // 选择的颜色的班级id
            nowColor: { r: 60, g: 156, b: 255, a: 1 }, // 当前颜色
		}
	},
	watch: {},
	computed: {
        getClassroomData() {
            return this.classTableData[this.chooseWeek].data[this.chooseClassIndex] || {}
        },
    },
	onLoad() {
		let everyDayEndTime = uni.getStorageSync("everyDayEndTime")
		// 下班结束时间
		if (everyDayEndTime) {
			this.endTime = everyDayEndTime
		} else {
			uni.setStorageSync("everyDayEndTime", this.endTime)
		}
		this.updatePageData() // 更新页面数据
		console.log("课程详情", timeList, classroomList, tableData)
		this.handleTime() // 处理时间段 所处位置
	},

	methods: {
		// 各种弹窗的打开和关闭
		popupStatus(key, status) {
			this.$refs[key][status ? "open" : "close"]()
		},
		updatePageData() {
			// 课程时间  timeList
			let timeListData = uni.getStorageSync("timeList")
			this.classTimeList = timeListData ? timeListData : timeList
			uni.setStorageSync("timeList", this.classTimeList)

			// 课表内容  tableData
			let tableDataData = uni.getStorageSync("tableData")
			this.classTableData = tableDataData ? tableDataData : tableData
			if (!tableDataData) uni.setStorageSync("tableData", this.classTableData)

			// 班级列表
			let classroomListData = uni.getStorageSync("classroomList")
			this.privateClassroomList = classroomListData ? classroomListData : classroomList
			if (!classroomListData) uni.setStorageSync("classroomList", this.privateClassroomList)
		},

		/** ****** 头部时间相关 ****** */
		// 绑定时间
		bindTimeChange(e) {
			console.log("e.detail.value", e.detail.value)
			this.endTime = e.detail.value
			uni.setStorageSync("everyDayEndTime", e.detail.value)
			this.getEndTime()
		},
		getEndTime() {
			let nowDay = new Date().toLocaleDateString() // 今天日期

			let startTime = new Date().getTime() // 开始时间
			let endTime = new Date(nowDay + " " + this.endTime).getTime() // 结束时间
			if (endTime <= startTime) {
				this.surplusTime = false
				this.progressWidth = "100%"
			} else {
				let usedTime = endTime - startTime // 相差的毫秒数

				let hours = Math.floor(usedTime / (3600 * 1000)) // 计算剩余的小时数
				let leave2 = usedTime % (3600 * 1000) // 计算剩余小时后剩余的毫秒数
				let minutes = Math.floor(leave2 / (60 * 1000)) // 计算剩余的分钟数

				let timeString = ""
				if (hours) timeString += hours + "小时"
				if (minutes) timeString += minutes + "分钟"
				this.surplusTime = timeString

				this.progressWidth = 100 - (((hours + minutes / 60) / 8) * 100).toFixed(2) + "%"
				console.log("时间", hours, leave2, minutes, this.progressWidth)
			}

            // 周末
            let weekday = new Date().getDay();
            if(weekday == 0 || weekday == 6){
                this.isWeekend = true;
                this.surplusTime = '周末了，好好休息'
            }

		},
		// 处理时间
		handleTime() {
			this.getEndTime()
			setTimeout(() => {
				this.handleTime()
			}, 1000 * 60)
		},

		/* ****** 课时时间部分 ******  */

		// 改变编辑状态
		changeEditState(item, index, bool) {
			let classList = [...this.classTimeList]
			console.log("this.temporaryClassTimeList", this.temporaryClassTimeList)

			// 点 编辑 按钮
			if (bool) {
                this.temporaryClassTimeList.map((t_item) => {
                    let c_index = classList.findIndex(c => c.timeId === t_item.timeId)
                    classList[c_index] = { ...t_item }
                })
				this.temporaryClassTimeList[index] = this.$common.deepClone(classList[index]) // 临时存储的课时列表，用于编辑状态下的数据保存
                this.isEditClassTimeIndex = index // 编辑的课时索引
				// this.temporaryClassTimeList.splice(index,1);
			} else {
				// 点 X
				classList[index] = this.$common.deepClone(this.temporaryClassTimeList[index]) // 保存编辑状态下的数据
                this.isEditClassTimeIndex = null // 编辑的课时索引
				this.temporaryClassTimeList.splice(index, 1)
			}
			console.log("classList", classList, item, index, bool)
			this.classTimeList = [...classList]
		},
		// 改变列表内容
		changeListCont(item, index) {
			let classList = [...this.classTimeList]
			// 编辑状态下的数据 恢复
			this.temporaryClassTimeList.map((t_item) => {
				let c_index = classList.findIndex(c => c.timeId === t_item.timeId)
                classList[c_index] = { ...t_item }
			})
			classList[index] = {...this.classTimeList[index]}
            this.isEditClassTimeIndex = null // 编辑的课时索引
			this.temporaryClassTimeList.splice(index, 1)
			this.classTimeList = [...classList]

			uni.setStorageSync("timeList", classList)
			console.log("改变列表内容", item, index)
		},
		// 处理课时列表
		async handleClassList(state) {
			if (state === "delete") {
				let status = await this.$common.showModal("提示", "这将会删除最后一项", "删!", "算了，留它一会")
				if (status) {
					this.classTimeList.pop()
					this.classTableData.map((item) => {
						item.data.pop()
					})
				}
			} else {
				let status = await this.$common.showModal("提示", "确定要在末尾增加一项？", "得加!", "按错了")
				if (status) {
					this.classTimeList.push({
						beginTime: "00:00",
						endTime: "00:00",
						timeId: "00" + (this.classTimeList.length + 1),
					})
					this.classTableData.map((item) => {
						item.data.push({
							classroom: "",
							timeId: "00" + (this.classTimeList.length + 1),
							title: "",
						})
					})
				}
			}
			console.log("this.classTableData", this.classTableData)
			uni.setStorageSync("tableData", this.classTableData)
			uni.setStorageSync("timeList", this.classTimeList)
		},


		/* ****** 课表部分 ******  */
		showClassroom(id) {
			if (id) {
				return this.privateClassroomList.find((item) => item.classroomId === id)
			} else {
				return {}
			}
		},
		// 选择的班级
		selectClassroom(classroomData) {
			let classTable = [...this.classTableData]
			let nowClassList = classTable[this.chooseWeek].data
			nowClassList[this.chooseClassIndex].classroom = classroomData.classroomId
			this.classTableData = this.$common.deepClone(classTable)
			uni.setStorageSync("tableData", this.classTableData)
			this.popupStatus("curriculum_popup", false)
		},
        updateClassContent(cont){
            console.log('e',cont);
            let classTable = [...this.classTableData]
			let nowClassList = classTable[this.chooseWeek].data
			nowClassList[this.chooseClassIndex].title = cont.title
            this.classTableData = this.$common.deepClone(classTable)
			uni.setStorageSync("tableData", this.classTableData)
			this.popupStatus("curriculum_popup", false)

        },


		/* ******* 班级相关操作 ******* */
		async handleClassRoomList(state) {
			if (state === "delete") {
				let status = await this.$common.showModal("提示", "这将会删除最后一项", "删!", "算了，留它一会")
				if (status) {
					this.privateClassroomList.pop()
				}
			} else {
				let status = await this.$common.showModal("提示", "确定要在末尾增加一项？", "得加!", "按错了")
				if (status) {
					this.privateClassroomList.push({
                        bgColor: "",
                        classroomId: "room_" + this.privateClassroomList.length + 1,
                        name: "-年-班"
                    })
				}
			}
			console.log("this.privateClassroomList", this.privateClassroomList)
			uni.setStorageSync("classroomList", this.privateClassroomList)
		},
        // 
        changeClassroomEditState(item, index, bool){
            if(bool){
                // 恢复其他存储的临时数据
                this.temporaryClassroomList.map(t_item => {
                    let c_index = this.privateClassroomList.findIndex(c => c.classroomId === t_item.classroomId)
                    this.privateClassroomList[c_index] = { ...t_item }
                })
                // 点 编辑
                this.isEditClassroomIndex = index;
                this.temporaryClassroomList[index] = this.$common.deepClone(item);
            }else{
                // 点 X
                this.isEditClassroomIndex = null;
                this.privateClassroomList[index] = this.$common.deepClone(this.temporaryClassroomList[index]);
            }
        },
        // 编辑班级内容
        changeClassroomListCont(item, index){
            console.log('changeClassroomListCont', item, index);
            this.temporaryClassroomList.splice(index, 1)

            // 恢复其他存储的临时数据
            this.temporaryClassroomList.map(t_item => {
                let c_index = this.privateClassroomList.findIndex(c => c.classroomId === t_item.classroomId)
                this.privateClassroomList[c_index] = { ...t_item }
            })
            this.isEditClassroomIndex = null;
            uni.setStorageSync("classroomList", this.privateClassroomList)
        },
        // 选择颜色
        selectColor(item){
            console.log('选择颜色', item);
            this.nowColor = item.bgColorObj || item.bgColor;
            this.changeColorRoomId = item.classroomId;
            this.$refs.pickerColor.open();
        },
        confirmColor(color) {
            console.log('confirmColor', color);
            let c_index = this.privateClassroomList.findIndex(c => c.classroomId === this.changeColorRoomId)
            this.privateClassroomList[c_index].bgColor = color?.hex || "#70c000";
            this.privateClassroomList[c_index].bgColorObj = color?.rgba || "#70c000";
            uni.setStorageSync("classroomList", this.privateClassroomList)

        },
        addClickNum(){
            this.clickNum++;
            console.log('addClickNum', this.clickNum);
            let threshold = 100;
            if(this.clickNum >= threshold){
                this.$common.showToast('Surprise');
                this.showBottomContent = true;
            }
            else if(this.clickNum == 8){
                this.$common.showToast('嗖嗖嗖~');
            }
            else if(this.clickNum == 14){
                this.$common.showToast('慢点慢点~');
            }
            else if(this.clickNum == 24){
                // this.$common.showToast(this.clickNum + ' 哇， 到了当初认识我的年纪了呢');
                this.$common.showToast(this.clickNum + ' 哇， 到了写这个软件的年纪了呢');
            }
            else if(this.clickNum == 25){
                // this.$common.showToast(this.clickNum + ' 当初认识你的年纪');
                this.$common.showToast(this.clickNum + ' 又过了一年~');
            }
            else if(this.clickNum == 36){
                this.$common.showToast('wow~ 快到40了');
            }
            else if(this.clickNum >= 40 && this.clickNum <= 47){
                this.$common.showToast('再点有惊喜哦' + this.clickNum + '次点击', false);
            }
            else if(this.clickNum >= 48 && this.clickNum <= 56){
                this.$common.showToast('可真有耐心呢😊' + this.clickNum, false);
            }
            else if(this.clickNum >= 59 && this.clickNum <= 65){
                this.$common.showToast('你不怕我把这个值设置成无限大的吗😂' + this.clickNum, false);
            }
            else if(this.clickNum >= 85 && this.clickNum <= 89){
                this.$common.showToast('好啦 就快到了' + this.clickNum, false);
            }
            else if(this.clickNum == 97){
                this.$common.showToast(this.clickNum + ' 不知道会不会有人发现这个小惊喜呢，也许压根就看不到这些呢');
            }
            else if(this.clickNum == 98){
                this.$common.showToast(this.clickNum + ' 不知道会不会有人发现这个小惊喜呢，也许压根就看不到这些呢');
            }
            else{
                this.$common.showToast('点了 ' + this.clickNum + ' 下', false);
            }
        }

        
	},
}
</script>
<style lang="scss" scoped>
$themeColor: #70c000; //#70c000  //#0081ff
$fontColor: #5f5f5f;

.window {
	background: linear-gradient(to bottom, #ebeff8, #f5f5f5 50%);
	min-height: 200vh;
	padding: 10rpx 34rpx;

	/* 通用 白色容器样式 */
	.radius_box {
		position: relative;
		background-color: #ffffffb9;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 30rpx 30rpx;
	}

	.header_box {
		width: 100%;
		/* height: 700rpx; */
		border-radius: 30rpx;
		transform: translateY(-36rpx);
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		.header_top {
			display: flex;
			margin-bottom: 20rpx;
			.smile_icon {
				width: 180rpx;
				height: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;
				box-shadow: rgba(0, 0, 0, 0.1) 1px 0px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
				.icon {
					width: 95%;
				}
			}
			.header_content {
				flex: 1;
				max-width: 400rpx;
				height: 200rpx;
				margin-left: 20rpx;
				color: $fontColor;
				font-size: 28rpx;
				padding-top: 30rpx;
				box-sizing: border-box;
				.time_label {
					white-space: nowrap;
					.important_text {
						margin: 0 8rpx;
						font-size: 36rpx;
						font-weight: bold;
					}
					.time {
						color: #70c000;
						margin-left: 4rpx;
					}
				}

				.edit_icon {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					font-size: 22rpx;
					.icon {
						margin: 0 6rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.progress_bar_box {
			height: 50rpx;
			border-radius: 40rpx;
			background: #eee;
			overflow: hidden;
			position: relative;
			.progress_bar {
				width: 50%;
				height: 100%;
				transition: width 0.2s linear;
				height: inherit;
				border-radius: 25px 0 0 25px;
				background: linear-gradient(90deg, #70c000, #ffcb01);
				position: relative;
				overflow: hidden;
				background-size: 300% 100%;
				animation: progress-animation 5s linear infinite;
				&::after {
					content: "";
					position: absolute;
					top: 10rpx;
					left: -50%;
					width: 100rpx;
					height: 40rpx;
					transform: rotate(64deg);
					background-color: #70c0005a;
					filter: blur(10rpx);
					animation: slideBox 5s linear 1s infinite; // 呼吸动画实现
				}
				@keyframes slideBox {
					0% {
						left: 0%;
					}
					100% {
						left: 490%;
					}
				}
				@keyframes progress-animation {
					0% {
						background-position: 0% 50%;
					}
					50% {
						background-position: 60% 50%;
					}
					100% {
						background-position: 0% 50%;
					}
				}
			}
		}
	}

	.classHour_btn_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 26rpx;
		padding-right: 4rpx;
		.btn_box {
			width: 36rpx;
			height: 36rpx;
			.icon {
				width: 100%;
				height: 100%;
			}
		}
		.delete_btn {
			margin-right: 40rpx;
		}
	}
	/* 课时设置 */
	.class_hour_box {
		margin-top: 30rpx;
		position: relative;

		.classHour_content {
			border-radius: 10rpx;
			min-height: 260rpx;
			/* max-height:400rpx; */
			overflow-y: scroll;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
			z-index: 2;
			padding: 10rpx 30rpx;
			.classHour_item {
				display: flex;
				align-items: center;
				width: 100%;
				height: 70rpx;
				/* margin-bottom: 20rpx; */
				padding: 14rpx 0;
				text-align: center;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
				&:last-child {
					margin-bottom: 0;
					border-bottom: none;
				}
				.label {
					color: $themeColor;
					font-weight: bold;
					width: 200rpx;
					min-width: 200rpx;
					max-width: 200rpx;
					font-size: 28rpx;
				}

				.time_label {
					width: 260rpx;
				}
				.edit_icon {
					width: 30rpx;
					height: 30rpx;
					transform: translateY(-2rpx);
					padding: 0 20rpx;
					.icon {
						width: 100%;
						height: 100%;
					}
				}
				.show_box {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}

				.edit_input {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-around;
					background-color: #eeeeee7c;
					border-radius: 10rpx;

					.start_input,
					.end_input {
						width: 120rpx;
						height: 50rpx;
					}
					.time_label {
						display: flex;
					}
				}
			}
		}
	}

	/* 课表部分 */
	.curriculum_box {
		margin-top: 50rpx;
		position: relative;
		.curriculum_content {
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			z-index: 2;
			/* 周几部分 */
			.week_box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				height: 80rpx;
				border-radius: 16rpx;
				overflow: hidden;
				background-color: #ffffffb9;
				padding: 0 10rpx;
				box-sizing: border-box;
				.week_title {
					flex: 1;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 28rpx;
					color: $fontColor;
					border-radius: 16rpx;
					margin-right: 16rpx;
					transition: 0.3s;
					&:last-child {
						margin-right: 0;
					}
				}
				.active_week {
					background-color: #70c0003a;
					color: $themeColor;
				}
			}

			/* 课表部分 */
			.curriculum_table {
				border-radius: 16rpx;
				position: relative;
				background-color: #ffffffb9;
				box-sizing: border-box;
				min-height: 260rpx;
				margin-top: 30rpx;
				padding: 14rpx 10rpx;
				.curriculum_table_item {
					display: flex;
					height: 100rpx;
					margin-bottom: 16rpx;
					line-height: 100rpx;
					text-align: center;
					color: $fontColor;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
					&:last-child {
						margin-bottom: 0;
						border-bottom: none;
					}
					.label {
						border-radius: 16rpx;
						margin-right: 16rpx;
						width: 180rpx;
					}
					.select_class {
						flex: 1;
						display: inline-flex;
						align-items: center;
						justify-content: flex-end;
						.text_box {
							color: #37352fc6;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							/* width: 240rpx;
                            height: 70%; */
							width: 160rpx;
							height: 64%;
							font-size: 28rpx;
							box-sizing: border-box;
							border-radius: 14rpx;
							background-color: rgba(0, 0, 0, 0.02);
							margin-right: 40rpx;
						}
					}
				}
			}
		}
	}

	/* 班级配置部分 */
	.classroom_box {
		margin-top: 80rpx;
		position: relative;
		.classroom_content {
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;

			min-height: 600rpx;
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #ffffffb9;
			padding: 20rpx;
			.classroom_item {
				display: flex;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				color: #37352f93;
				background-color: rgba(0, 0, 0, 0.02);
				&:first-child {
					margin-top: 0;
				}
				.color_box {
					width: 200rpx;
					text-align: center;
					.color {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 160rpx;
						height: 64%;
						font-size: 28rpx;
						box-sizing: border-box;
						border-radius: 14rpx;
						color: #37352f93;
					}
				}
                .label {
					flex: 1;
					text-align: center;
					font-weight: bold;
					font-size: 28rpx;
					padding: 0 20rpx;
                    .name_input{
                        font-size: 28rpx;
                        color: $themeColor;
                    }
				}
                .edit_box{
					width: 30rpx;
					padding: 0 20rpx;
					.icon {
						width: 100%;
						height: 100%;
					}
                }

			}
		}
	}

    .loading_box{
        width: 100rpx;
        margin-top: 100rpx;
        min-height: 100rpx;
        position: relative;
        transform: translateX(100rpx);
    }

	/* 下方 图片 */
	.icon_box {
		width: 100%;
		background-color: #ffffffa3;
		border-radius: 20rpx;
		margin-bottom: 50rpx;
		margin-top: 600vh;
		position: relative;
		padding-bottom: 172rpx;
		.flower {
			width: 100%;
		}
		.adorn_box {
			width: 50rpx;
		}
		.smile_box {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 75%;
			.text_box {
				text-align: center;
				opacity: 0.9;
				.adorn_box {
					width: 60rpx;
					position: absolute;
					top: -50rpx;
					left: 10rpx;
					transform: rotate(110deg);
				}
				.text_icon {
					width: 80%;
				}
			}
			.happy_box {
				display: flex;
				justify-content: center;
				margin-top: 80rpx;
				padding-bottom: 50rpx;
				font-family: FZShuTi;
				.red {
					color: #c23d1e;
				}
				.blue {
					color: #5398c0;
				}
				.green {
					color: #70c000;
				}
				.purple {
					color: #9a62c1;
				}
				.yellow {
					color: #f7b731;
				}
				.adorn_box1 {
					width: 30rpx;
					transform: rotate(120deg);
					margin-right: 40rpx;
				}
				.icon {
					width: 170rpx;
					transform: rotate(10deg);
					flex: 1;
				}
				.text_happy {
					font-size: 70rpx;
					font-weight: bold;
					margin: 0 40rpx;
					transform: rotate(-4deg);
				}
				.adorn_box2 {
					width: 30rpx;
					transform: rotate(0deg);
				}
			}
		}

        .top_text,.bottom_text{
            color: #909090;
            position: absolute;
            left: 0;
            text-align: justify;
            padding: 20rpx;
            font-size: 28rpx;
            line-height: 60rpx;
        }
        .top_text{
            top: -360vh;
            .end_text{
                margin-top: 120vh;
            }
        }
        .bottom_text{
            color: #cfcfcf;
            font-size: 26rpx;
            bottom: -160rpx;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }
	}

	/* 设置下班时间 */
	.popup_box {
		width: 100%;
		min-height: 400rpx;
		/* height: calc(100% - 100rpx); */
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx 40rpx;
		padding-bottom: 120rpx;
		box-sizing: border-box;

		.popup_title {
			font-size: 32rpx;
			font-weight: bold;
			color: $fontColor;
			margin-bottom: 20rpx;
		}
	}

	/* 选择班级弹窗 */
	.curriculum_popupBox {
		overflow-y: scroll;

		.classroom_cont {
			/* max-height: 700rpx; */
			.classroom_item {
				display: flex;
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				color: #37352f93;
				background-color: rgba(0, 0, 0, 0.02);
				&:first-child {
					margin-top: 0;
				}
				.label {
					flex: 1;
					/* color: $themeColor; */
					text-align: center;
					font-weight: bold;
					font-size: 28rpx;
					padding-left: 30rpx;
				}
				.label_null {
				}
				.color_box {
					width: 200rpx;
					text-align: center;
					.color {
						display: inline-flex;
						align-items: center;
						justify-content: center;
						width: 160rpx;
						height: 64%;
						font-size: 28rpx;
						box-sizing: border-box;
						border-radius: 14rpx;
						color: #37352f93;
					}
				}
			}
            /* 科目内容 */
            .course_cont{
                padding: 0 20rpx;
                box-sizing: border-box;
                align-items: center;
                margin-bottom: 40rpx;
                .title_input{
                    display:  block;
                    height: 60rpx;
                    font-size: 28rpx;
                    color: $themeColor;
                    background-color:rgba(0, 0, 0, 0.05);
                    margin: 0 10rpx;
                    border-radius: 10rpx;
                    text-indent: 20rpx;
                }
                .right_btn{
                    display: inline-block;
                    padding: 0rpx 20rpx;
                    font-size: 14px;
                    box-sizing: border-box;
                    border-radius: 8rpx;
                    color: #37352f93;
                }
            }

		}
	}
}
</style>
